<template>
  <div>
    <div
      style="
        width: 100%;
        height: 40px;
        margin-top: 13px;
        display: flex;
        align-items: center;
        justify-content: space-around;
      "
    >
      <img
        @click="fh"
        src="../../assets/heishang.png"
        alt=""
        style="width: 22px; height: 22px"
      />
      <div
        style="
          background-color: rgb(245, 245, 245);
          width: 300px;
          height: 35px;
          border-radius: 20px;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          align-items: center;
        "
      >
        <img
          src="../../assets/search.png"
          alt=""
          style="width: 20px; height: 20px"
        />
        <input
          type="text"
          style="
            background-color: rgb(245, 245, 245);
            width: 220px;
            height: 25px;
          "
        />
        <img
          src="../../assets/close.png"
          style="width: 20px; height: 20px"
          alt=""
        />
      </div>
      <img
        src="../../assets/QRcode.png"
        style="width: 20px; height: 20px; margin-right: 10px"
        alt=""
      />
    </div>
    <div
      style="
        width: 100%;
        height: 40px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
      "
    >
      <div
        style="
          width: 180px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <van-dropdown-menu style="width: 80px">
          <van-dropdown-item v-model="value1" :options="option1" />
        </van-dropdown-menu>
        <div>用户</div>
        <div>商品</div>
      </div>
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="value2"
          :options="option2"
          style="height: 30px"
        />
      </van-dropdown-menu>
    </div>
    <div class="aaa">
      <div class="subject">
        <div class="subject_left" id="subject_left1">
          <div class="subject_left_1">
            <img src="../../assets/01.webp" />
            <p class="nr">{{ nr }}</p>
            <div class="sub_1">
              <p class="sub_1_1">
                <img
                  src="../../assets/01.webp"
                  style="width: 20px; height: 20px; border-radius: 50%"
                  alt=""
                />
                &nbsp;&nbsp;
                <span>{{ usme }}</span>
              </p>
              <p class="sub_1_1">
                <van-icon name="like-o" style="font-size: 18px" />
                <span>123213</span>
              </p>
            </div>
          </div>
        </div>

        <div class="subject_right">
          <div class="subject_right_1">
            <img src="../../assets/01.webp" />
            <p class="nr">{{ nr }}</p>
            <div class="sub_1">
              <p class="sub_1_1">
                <img
                  src="../../assets/01.webp"
                  style="width: 20px; height: 20px; border-radius: 50%"
                  alt=""
                />
                &nbsp;
                <span>{{ usme }}</span>
              </p>
              <p class="sub_1_1">
                <van-icon name="like-o" style="font-size: 18px" />
                <span>123213</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import Pas from "../../components/Home_big.vue";
export default {
  components: {
    Pas,
  },
  data() {
    return {
      nr: "时候实话实说",
      usme: "千万人",
      active: 1,
      value1: 0,
      value2: "a",
      option1: [
        { text: "全部", value: 0 },
        { text: "最新", value: 1 },
        { text: "最热", value: 2 },
      ],
      option2: [
        { text: "筛选", value: "a" },
        { text: "图文", value: "b" },
        { text: "视频", value: "c" },
      ],
    };
  },
  methods: {
    fh() {
      this.$router.go(-1);
    },
  },
};
</script>
  
  <style scoped>
* {
  padding: 0;
  margin: 0;
}

input {
  border: 0px;
}

input[type="text"]:focus {
  outline: none;
  background-color: rgb(240, 240, 240);
}

.search {
  float: right;
  line-height: 50px;
  margin-right: 10px;
  color: white;
}
.subject_left_1 {
  padding: 5px;
  /* background: firebrick; */
}
.nr {
  margin: 0 10px !important;
  font-size: 14px;
  /* background: #f65c5c; */
  width: 165px;
  text-align: left;
  margin-top: 0px;
  padding: -30px;
  line-height: 20px;
  /* margin-left:10px !important; */
}

.aaa {
  /* margin-left: -111px; */
  width: 400px;
}
/* 主体内容 */
.subject {
  margin-top: 10px;
  padding-bottom: 50px;
  box-sizing: border-box;
  padding-right: 5px;
}
/* 主体内容左 */
.subject_left {
  width: 186px;
  float: left;
  overflow: hidden;
  padding-left: 5px;
  /* background-color: aquamarine; */
}
.sub_1_1 {
  display: flex;
  align-items: center;
  /* margin-top: 5px; */
  margin-left: 10px !important;
}

.sub_1 {
  display: flex;
  justify-content: space-between;
  color: black;
  font-size: 2px;
  /* margin-left: 10px; */
}

.subject_right img {
  width: 190px;
  /* height: 320px; */
  margin-bottom: 4px;
  margin-left: 5px !important;
}
.subject_left img {
  width: 190px;
  /* height: 320px; */
  margin-bottom: 4px;
  margin-left: 0;
}
/* 主体内容右 */
.subject_right {
  width: 190px;
  /* height: 1800px; */
  float: right;
  margin-top: 5px;
  padding-right: 12px;
  overflow: hidden;
  margin-left: -15px !important;
  /* box-sizing: border-box; */
  /* background-color: rgb(122, 122, 122); */
}
</style>
  